<template>
<div>
  <el-button @click="btnClick" type="success" plain>点我切换</el-button>
  <div class="box" style="width: 300px; height: 300px"></div>
</div>
</template>

<script setup>
import { useColorMode } from '@vueuse/core'
const mode = useColorMode()
const btnClick = () => {
  mode.value = mode.value === 'pink' ? 'orange' : 'pink'
}
</script>


<style scoped lang="scss">
.box {
  background-color: v-bind(mode)
}
</style>
